Miwlo - Documentation by “ThemesTrace”

Miwlo

By: ThemesTrace
Email: themestracehelp@gmail.com

Thank you for purchasing Miwlo HTML template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. Colors
  4. JavaScript
  5. Sources and Credits

1) HTML Structure - top

Miwlo - Landing Page HTML Template comes with clean and commented code. If you like to use the section which is used in Miwlo then need to use the area section as shows below

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

								
.header-area {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.4s ease-in-out;
}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

								
.header-area.fixed {
    background: #fff;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 30, 0.06);
}

B) CSS Files and Structure - top

Miwlo Template contains two main CSS files. The first one is a generic normalize file. Many browser interpret the default behavior of html elements differently. By using a general normalize CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

								
/*
-- Generic Area
==========================================================
*/

Generic Area CSS

/*
-- Header Area
==========================================================
*/

Header Area CSS

/*
-- Section Area
==========================================================
*/

-- Section Area CSS

/*
-- Section Area
==========================================================
*/

Section Area CSS

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

								
.footer-large {
    padding: 50px 0;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

C) Colors - top

Miwlo comes with four colors. Example are given below:

Dark

Orange

Blue

E) JavaScript - top

  • jQuery
  • jQuery 3rd party plugins
  • Miwlo custom script
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
  3. In addition to the custom scripts, We implement a few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. For example: 
								
/*
======================================
    Scroll Init
======================================
*/
(function() {

    $(window).on('scroll', function() {

        var $headerH 	= jQuery('.header-area').height();
        var $windowH 	= jQuery(window).scrollTop();
        var $nav 		= jQuery('.header-area');
        var $mNav		= jQuery('.miwlo-mobile-menu-area');

        if( $windowH > $headerH ) {
            $nav.addClass('fixed');
            $mNav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
            $mNav.removeClass('fixed');
        }

    });
})();

All The Important jQuery Plugins

Miwlo Custom jQuery Integration

F) Sources and Credits - top

Miwlo comes with the following images, icons or other files as listed.